
import axios from 'axios';
import React from 'react';
import { Upload, Modal,Image,Avatar } from 'antd';
import { PlusOutlined } from '@ant-design/icons';

function getBase64(file) {
	return new Promise((resolve, reject) => {
	  const reader = new FileReader();
	  reader.readAsDataURL(file);
	  reader.onload = () => resolve(reader.result);
	  reader.onerror = error => reject(error);
	});
  }

class Update extends React.Component{
	state = {
		previewVisible: false,
		previewImage: '',
		previewTitle: '',
		fileList: [
		  {
			uid: '-1',
			name: 'image.png',
			status: 'done',
			url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
		  },
		  {
			uid: '-xxx',
			percent: 50,
			name: 'image.png',
			status: 'uploading',
			url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
		  },
		  {
			uid: '-5',
			name: 'image.png',
			status: 'error',
		  },
		],
	  };
	
	  handleCancel = () => this.setState({ previewVisible: false });
	

	  handlePreview = async file => {
		if (!file.url && !file.preview) {
		  file.preview = await getBase64(file.originFileObj);
		}
	
		this.setState({
		  previewImage: file.url || file.preview,
		  previewVisible: true,
		  previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
		});
	  };
	
	  handleChange = ({ fileList }) => this.setState({ fileList });
		render(){
			var  baseUrl="http://localhost/"
			var url=baseUrl+"0ea494d8-9a70-47ed-b16f-d1e2a073e484_a.jpeg";
			const { previewVisible, previewImage, fileList, previewTitle } = this.state;
			const uploadButton = (
			  <div>
				<PlusOutlined />
				<div style={{ marginTop: 8 }}>Upload</div>
			  </div>
			);
			return(
				<>
        <Upload
		name="files"
          action="http://localhost:8081/file/upload"
          listType="picture-card"
          fileList={fileList}
          onPreview={this.handlePreview}
          onChange={this.handleChange}
		  method="POST"
		  headers= {{			Authorization: "Bearer " +window.localStorage.getItem("adminToken")}

		}
        >
          {fileList.length >= 8 ? null : uploadButton}
        </Upload>
        <Modal
          visible={previewVisible}
          title={previewTitle}
          footer={null}
          onCancel={this.handleCancel}
        >
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
<br/>
<p  style={{ color:'black'}} >用户的头像：</p>
<Avatar src={<Image src={url}  style={{ width: 32 }} />} />
      </>
			);
}
}
export default Update;